<template>
    <div class="chapter">
        <Header></Header>
        <!-- 主体 -->
        <div class="main-box">
            <div class="header">
                <h3 class="title">章节练习</h3>
                <el-breadcrumb class="other">
                    <el-breadcrumb-item :to="{ path: '/studyCenter' }">学习中心</el-breadcrumb-item>
                    <el-breadcrumb-item>章节练习</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="content">
                <el-table class="list-table" :data="tableData" stripe style="width: 100%">
                  <el-table-column prop="date" label="试卷名称">
                    <template slot-scope="scope">
                      <span class="scope-icon">NEW</span>
                      <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="更新时间" width="180">
                    <template slot-scope="scope">
                      <div  style="text-align:center;" >{{ scope.row.date }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="完成度" width="120">
                    <template slot-scope="scope">
                      <div style="text-align:center;">{{ scope.row.completeness }}</div>
                    </template>
                  </el-table-column>
                    <el-table-column
                      label="操作"
                      width="100">
                      <template slot-scope="scope">
                          <el-button @click="handleChapterItemClick(scope.row)" type="text" size="small" class="operateBtn">免费试用</el-button>
                      </template>
                  </el-table-column>
                </el-table>
                <div class="content-footer">
                  <el-pagination
                    :current-page="currentPage"
                    :page-size='pageSize'
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="total">
                  </el-pagination>
                   <div class="recordSum">
                    共{{total}}条记录
                  </div>
                </div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<style lang="scss" scoped>
.chapter {
  background-image: url();
  .main-box {//列表盒子
    .content {//列表内容
      .list-table{
        .scope-icon{
          padding: 2px 8px;
          background-color: #F37B1D;
          border-radius: 2px;
          color: #fff;
          font-size:10px;
          font-weight: bold;
        }
      }
      .operateBtn{
        padding:8px 12px;
        color: #fff;
        background-color: #3bb4f2;
        border-color: #3bb4f2;
        border-radius: 14px;
      }
      .list-table {
        .has-gutter tr th{
          background:#f9f9f9;
          border-top: 1px solid #ddd;
          border-bottom: 1px solid #ddd;
          .cell{
            color:#333;
            text-align:center;
          }
        }
      }
      .content-footer{
        .recordSum{
          color: #999;
          font-size:14px;  
        }
        width:100%;
        display:flex;
        justify-content: center;
        align-items: center;
      }
    }
    width: 1210px;
    margin: 30px auto;
    padding: 10px 20px;
    background: white;
    box-shadow: 0px 0px 6px #888888;
    .header {//列表头部
      padding-top: 26px;
      display: flex;
      align-items: center;
      .title {
        font-weight: 600;
        font-size: 20px;
      }
      .other {
        margin: -8px 0 0 20px;
        .el-breadcrumb__item:last-child .el-breadcrumb__inner,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
        .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
          color: #0e90d2;
        }
        .is-link {
          color: #0e90d2;
        }
      }
    }
  }
}
// 修改element 样式
.el-pager li.active {
    background-color: #409EFF;
    cursor: default;
    color:white!important;
}
.el-pager li {
   border: 1px solid #ccc;
   margin-right: 5px!important;
}
.el-pager li.active+li {
   border: 1px solid #ccc!important;
}
// .el-pagination .btn-prev {
//    border: 1px solid #ccc;
//   margin-right: 5px!important;
// }
</style>
<script>
import Header from "../../../components/common/header.vue";
import Footer from "../../../components/common/footer.vue";
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      currentPage:1,//当先页
      pageSize:8,//一次几条
      total:20,//总共条数
      tableData: [//表数据
        {
          date: "2019-05-14 10:26:27",
          name: "(2019)第一章 总论",
          completeness: "76 / 40	"
        },
        {
          date: "2019-05-14 19:29:01",
          name: " (2019)第二章 会计政策、会计估计及其变更和差错更正",
          completeness: "6 / 49"
        },
        {
          date: "2019-05-14 11:38:08",
          name: "(2019)第三章 存货",
          completeness: "9 / 44"
        },
        {
          date: "2019-05-15 15:51:12",
          name: "(2019)第四章 固定资产",
          completeness: "9 / 44"
        }
      ]
    };
  },
  methods:{

    handleCurrentChange(currentIdx){
      console.log(currentIdx);
    },
    handleChapterItemClick(idx){
      console.log(idx)
    }
  }
};
</script>


